<template>


  <el-row type="flex" justify="center" style="z-index: 1">
    <el-col :span="15" :xs="24">
      <el-card class="box-card"  v-if="listData!=''">
        <h3>  留言列表！ </h3>
        <div class="card-body"  v-for="item in listData" :key="item.messageId" >
          <p class="display-6">
            <el-avatar size="large" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
            A funny Human |
            <span class="date">{{ item.messageTime | dateYMDHMSFormat}}</span>
          </p>

          <div>
            <p v-html="item.messageContent" >
            </p>
          </div>

        </div>
      </el-card>

    </el-col>

  </el-row>
</template>

<script>

import {messageGet} from "@/api/message";

export default {
  name: "messageList",
  data() {
    return {
      listData: '',
      // 分页参数
      pageParam: {
        total: 0,
        size: 8,
        current: 1,
        pages: 1
      }
    }
  },
  methods:{
    nextPage(){
      this.getMessageList(++this.current)
    },
    prevPage(){
      this.getMessageList(--this.current)
    },
    currentChange(val){
      /*修改当前页面为val 来自前端点击数字的值*/
      this.current = val;
      this.getMessageList(this.current);
    },
    getMessageList(page){
      messageGet(page).then(res => {
            this.listData = res.data.records;
          }
      ).catch(err => {
            console.error(err);
          }
      )
    }
  },
  created() {
    this.getMessageList("1")
  }
}
</script>

<style scoped>

</style>
